<template>
<div class="reset">

    <div class="container">
        <van-form @submit="onSubmit" ref="vanForm" class="form">
            <p class="tit">若你忘记了密码，可以在这里重置密码</p>
            <van-field
                v-model="form.phone"
                name="phone"
                placeholder="请输入手机号"
                :rules="phone"
            />
            <van-field
                v-model="form.pass"
                type="password"
                name="密码"
                placeholder="请输入新密码"
                :rules="[{ required: true, message: '请填写您的新密码' }]"
            />
            <van-field
                v-model="form.code"
                name="验证码"
                placeholder="请输入验证码"
                :rules="[{ required: true, message: '请填写手机验证码' }]"
            >
               <template #button>
                    <van-button native-type="button" size="small" type="primary" :disabled="time !== 0" @click="sendCode">
                        {{ time !== 0 ? `${time}秒后重新发送` : '发送验证码' }}
                    </van-button>
                </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button round block type="danger" native-type="submit">重置密码</van-button>
            </div>
        </van-form>
    </div>

</div> 
</template>

<script>
export default {
    data () {
        return {
            form: {
                phone: '',
                pass: '',
                code: ''
            },
            phone: [
                { required: true, message: '请填写手机号' },
                { pattern: /^1[23456789]\d{9}$/, message: '请输入正确的手机号格式' }
            ],
            time: 0
        }
    },
    methods: {
        onSubmit (values) {
            console.log('submit', values);
            this.$user.resetPass({ phone: this.form.phone, verify: this.form.code, password: this.form.pass }).then(() => {
                setTimeout(() => {
                    this.$toast.success('重置密码成功')
                    this.$router.push('/user')
                }, 500)
            })
        },
        async sendCode () {
            try {
                if (this.time !== 0) return
                await this.$refs.vanForm.validate('phone')
                this.$user.getSendSms(this.form.phone, '1')
                setTimeout(() => {
                    this.$toast.success('验证码已发送')
                }, 500)
                this.time = 60
                let time = setInterval(() => {
                    this.time --
                    if (this.time <= 0) {
                        clearInterval(time)
                        this.time = 0
                    }
                }, 1000)
            } catch (err) {
                console.log(err)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.reset {
    // height: 100%;
    width: 100%;
    background-color: #fafafa;
}
.form {
    background-color: transparent;
    // /deep/ .van-cell {
    //     background-color: transparent;
    // }
}
.tit {
    line-height: 50px;
    text-align: left;
    color: #999;
}
</style>
